<template>
    <div class="guide-container">
        <van-swipe ref="swipeRef" :loop="false" @change="onChange" :show-indicators="false">
            <van-swipe-item v-for="(item, index) in guideList" :key="index">
                <div :class="gernerateClass(index)" id="item">
                    <img :src="item.imgUrl" :class="item.imgClass" />
                    <p :class="item.titleClass"><span>{{ item.title }}</span><span :class="item.title2Class">{{
                        item.title2
                    }}</span></p>
                    <p :class="item.textClass">{{ item.text }}</p>
                    <p :class="item.textClass">{{ item.text2 }}</p>
                </div>
            </van-swipe-item>
            <!--  自定义轮播图指示器 -->
            <template #indicator v-if="current != 0">
                <ul class="indicators">
                    <li class="indicator" v-for="(index) in guideList.length - 1" :key="index"
                        :class="current == index ? 'active' : ''"></li>
                </ul>
            </template>
        </van-swipe>
        <van-nav-bar v-if="current != 0" :fixed="true" left-arrow :border="false" right-text="跳过" @click-left="onClickLeft"
            @click-right="router.push('/login')">
        </van-nav-bar>
        <van-button @click="router.push('/login')" v-if="current == 3" size="large" color="linear-gradient(to right, #e9837a, #7536f9)">
            现在开始
        </van-button>
    </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import router from "../../router";
import { SwipeInstance } from "vant/lib/swipe/types";
let guideList = ref([
    {
        imgUrl: '/public/image/leadimg/lead1.png',
        imgClass: 'guide-img',
        title: 'Smart',
        titleClass: 'guide-title-left',
        title2: 'Control',
        title2Class: 'guide-text-right'
    }, {
        imgUrl: '/public/image/leadimg/lead2.png',
        imgClass: 'guide-img',
        title: '控制你的家',
        titleClass: 'guide-title',
        text: '你可以控制你所有的设备',
        text2: '回家享受生活吧',
        textClass: 'guide-text'
    },
    {
        imgUrl: '/public/image/leadimg/lead3.png',
        imgClass: 'guide-img',
        title: '设置在线设备',
        titleClass: 'guide-title',
        text: '随时随地设置任何设备',
        text2: '你想控制吗',
        textClass: 'guide-text'
    },
    {
        imgUrl: '/public/image/leadimg/lead4.png',
        imgClass: 'guide-img',
        title: '大量业务场景',
        titleClass: 'guide-title',
        text: '要控制的多用户和管理员',
        text2: '你的智能家具',
        textClass: 'guide-text'
    }
]);
let current = ref(0);
// swipe上用ref设置一个锚点
const swipeRef = ref<SwipeInstance>();
// 动态添加样式
let gernerateClass = (index: number) => {
    return 'guide-item' + index;
};
// 在每一页轮播结束后，会触发 change 事件
let onChange = (index: number) => {
    current.value = index;
};
// 点击左侧箭头
let onClickLeft = () => {
    swipeRef.value?.prev();
};
</script>

<style lang="scss" scoped>
.guide-container {
    width: 100%;
    height: 100%;
    background-color: #352c5d;

    .van-swipe {
        height: calc(100% - 40px);

        .guide-item0 {
            text-align: center;

            .guide-img {
                width: 50px;
                height: 50px;
                margin-top: 280px;
                margin-bottom: 150px;
            }

            .guide-title-left {
                color: #fff;
                font-size: 18px;

                .guide-text-right {
                    color: #e88565;
                }

            }

        }

        .guide-item1 {
            text-align: center;

            .guide-img {
                margin-top: 80px;
                width: 90%;
                height: 230px;
            }

            .guide-title {
                color: #fff;
                margin-top: 30px;
                margin-bottom: 15px;
                font-size: 22px;
            }

            .guide-text {
                color: #8d84b2;
                font-size: 13px;
            }
        }

        .guide-item2 {
            text-align: center;

            .guide-img {
                margin-top: 80px;
                width: 90%;
                height: 230px;
            }

            .guide-title {
                color: #fff;
                margin-top: 30px;
                margin-bottom: 15px;
                font-size: 22px;
            }

            .guide-text {
                color: #8d84b2;
                font-size: 13px;
            }
        }

        .guide-item3 {
            text-align: center;

            .guide-img {
                margin-top: 80px;
                width: 90%;
                height: 230px;
            }

            .guide-title {
                color: #fff;
                margin-top: 30px;
                margin-bottom: 15px;
                font-size: 22px;
            }

            .guide-text {
                color: #8d84b2;
                font-size: 13px;
            }
        }

        .indicators {
            position: absolute;
            bottom: 120px;
            left: 50%;
            display: flex;
            transform: translateX(-50%);

            .indicator {
                width: 5px;
                height: 5px;
                background-color: #fdcc41;
                border-radius: 50%;
                transition: opacity 1s,
                    background-color 1s;

                &:not(:last-child) {
                    margin-right: 7px;
                }

                &:last-child {
                    margin-right: 4px;
                }

                &.active {
                    width: 12px;
                    height: 5px;
                    border-radius: 2px;
                    background-color: #fb8f66;
                }
            }
        }
    }
}

::v-deep .van-icon {
    color: white;
}

::v-deep .van-nav-bar__text {
    color: #cd7864;
}

::v-deep .van-nav-bar {
    background-color: #352c5d;
}

::v-deep .van-button {
    position: fixed;
    left: 60px;
    bottom: 80px;
    width: 260px;
    border-radius: 10px;
}
</style>